import React from 'react';
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';
import { useInView } from 'react-intersection-observer';
import { projects } from '../../data/projects';
import './FeaturedProjects.css';

const FeaturedProjects = () => {
  // 获取前3个项目作为精选项目
  const featuredProjects = projects.slice(0, 3);
  
  // 使用intersection observer检测元素是否可见
  const [ref, inView] = useInView({
    triggerOnce: true,
    threshold: 0.1
  });

  // 动画变体
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.3
      }
    }
  };

  const itemVariants = {
    hidden: { y: 30, opacity: 0 },
    visible: {
      y: 0,
      opacity: 1,
      transition: {
        duration: 0.6
      }
    }
  };

  return (
    <section className="featured-projects section">
      <div className="container">
        <div className="section-header">
          <h2 className="section-title">精选项目</h2>
          <p className="section-subtitle">
            这些是我最近完成的一些代表性作品，展示了我的技能和专业领域
          </p>
        </div>

        <motion.div 
          className="featured-projects-grid"
          ref={ref}
          variants={containerVariants}
          initial="hidden"
          animate={inView ? 'visible' : 'hidden'}
        >
          {featuredProjects.map((project, index) => (
            <motion.div 
              key={project.id} 
              className="featured-project-card"
              variants={itemVariants}
            >
              <div className="project-image-container">
                <img 
                  src={project.thumbnail} 
                  alt={project.title} 
                  className="project-image"
                />
                <div className="project-overlay">
                  <Link to={`/portfolio/${project.id}`} className="project-link">
                    查看详情
                  </Link>
                </div>
              </div>
              <div className="project-content">
                <h3 className="project-title">{project.title}</h3>
                <div className="project-tags">
                  {project.tags.slice(0, 3).map((tag, i) => (
                    <span key={i} className="project-tag">{tag}</span>
                  ))}
                </div>
                <p className="project-description">{project.description}</p>
              </div>
            </motion.div>
          ))}
        </motion.div>

        <div className="view-all-container">
          <Link to="/portfolio" className="btn btn-outline view-all-btn">
            查看全部项目
          </Link>
        </div>
      </div>
    </section>
  );
};

export default FeaturedProjects;
